<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
	<style type="text/css">
		@import "../../../dijit/themes/nihilo/nihilo.css";
	</style>
	<style type="text/css">
		body, html{
			padding:0;
			margin:0;
			background:#666;
			text-align:center;
		}
		.box{
			background:#fff;
			color:#666;
			font:11px monospace;
			width:250px;
			height:200px;
			margin:40px auto;
			padding:0;
		}
		.toWrapper{
			position:relative;
			width:100%;
			height:100%;
		}
		.box .transformOrigin{
			position:absolute;
			font-size:0;
			background:red;
			width:3px;
			height:3px;
			margin:0;
			border:none;
			padding:0;
			top:100px;
			left:125px;	
		}
		.boxContainer{
			color:white;
			background:black;
			height:300px;
			width:100%;
			text-align:center;
			overflow:hidden;
			position:relative;
			padding:0;
		}
		div.controls{
			background:#ddd;
			color:#333;
			font:bold 11px monospace;
			margin:0 0 20px 0;
			border-bottom:1px solid #ccc;
		}
		.transformName{
			font: 18px/200px bold arial, helvetica;
			color: #bbb;
		}
		.mainContainer{
			width:800px;
			border-right:1px solid #ccc;
			text-align:left;
			margin:auto;
		}
	</style>
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
	<script type="text/javascript">
	dojo.require("dojo.fx");
	dojo.require("dojox.html.ext-dojo.style");
	dojo.require("dijit.form.HorizontalSlider");
		var toX = 125,
			toY = 100,
			rotation = 0,
			translateX = 0,
			translateY = 0,
			skewX = 0,
			skewY = 0,
			scaleX = 1,
			scaleY = 1
		;
		dojo.addOnLoad(function(){
			var rotateToX = dijit.byId("rotateToX"),
				rotateTransformOrigin = dojo.byId("transformOriginNode"),
				rotateToY = dijit.byId("rotateToY"),
				rotateControl = dijit.byId("rotateControl"),
				skewXControl = dijit.byId("skewXControl"),
				skewYControl = dijit.byId("skewYControl"),
				scaleXControl = dijit.byId("scaleXControl"),
				scaleYControl = dijit.byId("scaleYControl"),
				translateXControl = dijit.byId("translateXControl"),
				translateYControl = dijit.byId("translateYControl"),
				transforms = {
					rotate: "",
					translateX: "",
					translateY: "",
					skewX: "",
					skewY: "",
					scaleX: "",
					scaleY: ""
				},
				applyTransforms = function(transforms){
					var tString = "";
					for(var i in transforms){
						tString += transforms[i] + " "; 
					}
					dojo.style("targetDiv", "transform", tString);
				}
			;

			// rotate
			rotateToX.connect(rotateToX, "onChange", function(){
				toX = parseInt(this.value);
				dojo.style(rotateTransformOrigin, "left", toX + "px");
				dojo.style("targetDiv", "transformOrigin", toX + "px " + toY + "px");
			});
			rotateToY.connect(rotateToY, "onChange", function(){
				toY = parseInt(this.value);
				dojo.style(rotateTransformOrigin, "top", toY + "px");
				dojo.style("targetDiv", "transformOrigin", toX + "px " + toY + "px");
			});
			rotateControl.connect(rotateControl, "onChange", function(){
				rotation = this.value;
				transforms.rotate = "rotate(" + rotation + "deg)";
				applyTransforms(transforms);
			});

			// skewX
			skewXControl.connect(skewXControl, "onChange", function(){
				skewX = this.value;
				transforms.skewX = "skewX(" + skewX + "deg)";
				applyTransforms(transforms);
			});
			
			// skewY
			skewYControl.connect(skewYControl, "onChange", function(){
				skewY = this.value;
				transforms.skewY = "skewY(" + skewY + "deg)";
				applyTransforms(transforms);
			});

			// scaleX
			scaleXControl.connect(scaleXControl, "onChange", function(){
				scaleX = this.value;
				transforms.scaleX = "scaleX(" + scaleX + ")";
				applyTransforms(transforms);
			});

			// scaleY
			scaleYControl.connect(scaleYControl, "onChange", function(){
				scaleY = this.value;
				transforms.scaleY = "scaleY(" + scaleY + ")";
				applyTransforms(transforms);
			});

			// translateX
			translateXControl.connect(translateXControl, "onChange", function(){
				translateX = this.value;
				transforms.translateX = "translateX(" + translateX + "px)";
				applyTransforms(transforms);
			});

			// translateY
			translateYControl.connect(translateYControl, "onChange", function(){
				translateY = this.value;
				transforms.translateY = "translateY(" + translateY + "px)";
				applyTransforms(transforms);
			});

		});
	</script>
	</head>
	<body class="nihilo">
	<div class="mainContainer">
		<div class="boxContainer">
			<div id="targetDiv" class="box">
				<div class="toWrapper">
					<div class="transformName">Transform</div>
					<div id="transformOriginNode" class="transformOrigin">
					</div>
				</div>
			</div>
		</div>
		<div class="controls">
			<table>
				<tr>
					<td>Transform Origin - x</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="250"
								discreteValues="251"
								value="125"
								id="rotateToX"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Transform Origin - y</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="200"
								discreteValues="361"
								value="100"
								id="rotateToY"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Rotation angle</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="360"
								discreteValues="361"
								value="0"
								id="rotateControl"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Skew X</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="360"
								discreteValues="361"
								value="0"
								id="skewXControl"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Skew Y</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="360"
								discreteValues="361"
								value="0"
								id="skewYControl"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Scale X</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum=".1"
								maximum="4"
								discreteValues="41"
								value="1"
								id="scaleXControl"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Scale Y</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum=".1"
								maximum="4"
								discreteValues="41"
								value="1"
								id="scaleYControl"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Translate X</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="200"
								discreteValues="201"
								value="0"
								id="translateXControl"></div>
						</div>
					</td>
				</tr>
				<tr>
					<td>Translate Y</td>
					<td>
						<div>
							<div style="width:200px" dojoType="dijit.form.HorizontalSlider"
								minimum="0"
								maximum="200"
								discreteValues="201"
								value="0"
								id="translateYControl"></div>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>
